<template>
    <div class='box'>
        <div class="box1">
            <el-form :model="ruleForm" ref="ruleForm" label-width="0px">
           <el-form-item prop="user">
           </el-form-item>
           
        <el-input v-model="ruleForm.user" placeholder="请输入内容" class="input1"></el-input>
      
           <el-form-item prop="pass">

         <el-input v-model="ruleForm.pass" placeholder="请输入密码" class="input1"></el-input>
           </el-form-item>

         <el-form-item>
         <el-button type="primary" class="dlu" @click="dlu()">登录</el-button>
         <el-button type="info" class="chongzhi"  @click="chongzhi">重置</el-button>
         <el-form-item>
         </el-form>
        </div>

    </div>
</template>

<script>
import {getlogin} from '../api/getData.js'
export default {
    data() {
        return {
            ruleForm:{
pass:'',
user:''
            }
        };
    },
    mounted() {},
    methods: {
dlu(){
   getlogin({
    //    用户名字
       username:this.ruleForm.user,
    //    密码
       password:this.ruleForm.pass
   }).then(res=>{
if(res.meta.status==200){
localStorage.setItem('token',res.data.token)
this.$message({
    message:'登录成功',
    type:'success'
})
setTimeout(()=>{
    this.$router.push({path:"/index"})
},1000)
}else{
    this.$message.error(res.meta.msg)
}
   })
},
chongzhi(){
    this.ruleForm.user=''
    this.ruleForm.pass=''
}
    },
    components:{}
};

</script>

<style lang='scss'>
.box{
    width: 100%;
    height: 100%;
    background-color: #cccccc;
}
.box1{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 400px;
    height: 300px;
    border-radius:15px; 
    background-color:#ffff;
padding-top:40px; 
}
.input1{
    width: 90%;
    // height: 90%;
    height: 60px;
    margin-left:30px 
}
.dlu{
    margin-left: 20px;
}
</style>
